<template>
	<view class="container">

		<uni-section>

			<view class="uni-padding-wrap uni-common-mt">
				<uni-segmented-control :current="current" :values="items" :style-type="styleType"
					:active-color="activeColor" @clickItem="onClickItem" />
			</view>
			<view class="content">
				<!-- items: ['心电图', '血氧饱和度', '体温', '血糖', '血压'], -->
				<view v-if="current === 0">
					<view class="content-item">
						<image src="@/static/images/tabbar/heart.png" mode="aspectFit"></image>
						<view class="text">
							请正确连接设备，开始测量
						</view>
						<view class="btn">
							<button type="primary" size="default">开始心电测量</button>
						</view>
						<navigator url="/pages/index/heart/heart">
						<view class="btn">
							<button type="primary" size="default">手动输入心电</button>
						</view>
						</navigator>
					</view>
				</view>
				<view v-if="current === 1">
					<view class="content-item">
						<image src="@/static/images/tabbar/bloodoxygen.png" mode="aspectFit"></image>
						<view class="text">
							请正确连接设备，开始测量
						</view>
						<view class="btn">
							<button type="primary" size="default">开始血氧测量</button>
						</view>
						<navigator url="/pages/index/bloodoxygen/bloodoxygen">
						<view class="btn">
							<button type="primary" size="default">手动输入血氧</button>
						</view>
						</navigator>
					</view>
				</view>
				<view v-if="current === 2">
					<view class="content-item">
						<image src="@/static/images/tabbar/temperature.png" mode="aspectFit"></image>
						<view class="text">
							请正确连接设备，开始测量
						</view>
						<view class="btn">
							<button type="primary" size="default">开始体温测量</button>
						</view>
						<navigator url="/pages/index/temperature/temperature">
						<view class="btn">
							<button type="primary" size="default">手动输入体温</button>
						</view>
						</navigator>
					</view>
				</view>
				<view v-if="current === 3">
					<view class="content-item">
						<image src="@/static/images/tabbar/blood_sugar.png" mode="aspectFit"></image>
						<view class="text">
							请正确连接设备，开始测量
						</view>
						<view class="btn">
							<button type="primary" size="default">开始血糖测量</button>
						</view>
						<navigator url="/pages/index/blood_sugar/blood_sugar">
						<view class="btn">
							<button type="primary" size="default">手动输入血糖</button>
						</view>
						</navigator>
					</view>
				</view>
				<view v-if="current === 4">
					<view class="content-item">
						<image src="@/static/images/tabbar/bloodpresure.png" mode="aspectFit"></image>
						<view class="text">
							请正确连接设备，开始测量
						</view>
						<view class="btn">
							<button type="primary" size="default">开始血压测量</button>
						</view>
						<navigator url="/pages/index/blood_pressure/blood_pressure">
						<view class="btn">
							<button type="primary" size="default">手动输入血压</button>
						</view>
						</navigator>
					</view>
				</view>
				<view v-if="current === 5">
					<view class="content-item">
						<image src="@/static/images/tabbar/Cholesterol.png" mode="aspectFit"></image>
						<view class="text">
							请正确连接设备，开始测量
						</view>
						<view class="btn">
							<button type="primary" size="default">开始胆固醇测量</button>
						</view>
						<navigator url="/pages/index/Cholesterol/Cholesterol">
						<view class="btn">
							<button type="primary" size="default">手动输入胆固醇</button>
						</view>
						</navigator>
					</view>
				</view>
				<view v-if="current === 6">
					<view class="content-item">
						<image src="@/static/images/tabbar/uricacid.png" mode="aspectFit"></image>
						<view class="text">
							请正确连接设备，开始测量
						</view>
						<view class="btn">
							<button type="primary" size="default">开始尿酸测量</button>
						</view>
						<navigator url="/pages/index/uricacid/uricacid">
						<view class="btn">
							<button type="primary" size="default">手动输入尿酸</button>
						</view>
						</navigator>
					</view>
				</view>
				<view v-if="current === 7">
					<view class="content-item">
						<image src="@/static/images/tabbar/bodyfat.png" mode="aspectFit"></image>
						<view class="text">
							请正确连接设备，开始测量
						</view>
						<view class="btn">
							<button type="primary" size="default">开始体脂测量</button>
						</view>
						<navigator url="/pages/index/bmi/bmi">
						<view class="btn">
							<button type="primary" size="default">手动输入BMI</button>
						</view>
						</navigator>
					</view>
				</view>
				<view v-if="current === 8">
					<view class="content-item">
						<image src="@/static/images/tabbar/heartrate.png" mode="aspectFit"></image>
						<view class="text">
							请正确连接设备，开始测量
						</view>
						<navigator url="/pages/index/heart_rate/heart_rate">
							<view class="btn">
								<button type="primary" size="default">开始心率测量</button>
							</view>
						<view class="btn">
							<button type="primary" size="default">手动输入心率</button>
						</view>
						</navigator>
					</view>
				</view>
			</view>

			<view class="foot-btn">
				<button class="footer-item" type="default">
					<image src="@/static/icon/notification.png" mode="aspectFit"></image>
					<text>测量提醒</text>
				</button>
				<navigator url="/pages/index/history_data/history_data">
				<button class="footer-item" type="default">
					<image src="@/static/icon/history.png" mode="aspectFit"></image>
					<text>历史数据</text>
				</button>
				</navigator>

			</view>
		</uni-section>

	</view>
</template>

<script>
	import request from '@/utils/request'

	export default {
		props: {
			item: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		data() {
			return {
				items: ['心电图', '血氧', '体温', '血糖', '血压','胆固醇','尿酸','体脂','心率'],
				current: 0,
				activeColor: '#007aff',
				styleType: 'text',
			}
		},
		methods: {
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			}
		}
	}
</script>

<style lang="scss">
	.container {
		.uni-common-mt {
			margin-top: -40rpx;
		}

		.uni-padding-wrap {
			padding: 0px 10rpx;
		}

		.content {
			justify-content: center;
			height: 500px;
			text-align: center;

			.content-item {
				background-color: white;

				image {
					width: 300rpx;
					height: 300rpx;
					margin: 100rpx 0;
				}

				.text {
					font-size: 30rpx;
					color: #666;
					margin: 10rpx;
				}

				.btn {
					button {
						width: 500rpx;
						 margin-bottom: 30rpx;
					}
				}
			}
		}

		.foot-btn {
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding: 20rpx 0;
			background-color: white;
		}
		

		.footer-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			background: white;
			transform: translateX(-95rpx);
			image {
				width: 50rpx;
				height: 50rpx;
				margin-bottom: 10rpx;
			}

			text {
				font-size: 30rpx;
			}
		}
	}
</style>